<template>
  <div>
    <el-row>
      <search v-model="form">
        <template slot="item">
          <el-form-item label="菜单名">
            <el-input v-model="form.title" placeholder="菜单名"></el-input>
          </el-form-item>
        </template>
        <template slot="btns">
          <el-button type="primary" @click="addMenu" v-if="$hasButton('add')">添加</el-button>
        </template>
      </search>

      <el-card class="small-card card-margin">
        <div style="margin-bottom: 10px;padding-left: 15px" v-if="chooseList.length > 0">
          <el-button size="mini" type="danger" @click="removeList">删除{{chooseList.length}}条</el-button>
        </div>
        <vxe-table border
                   show-overflow
                   ref="xTree"
                   row-id="uuid"
                   :tree-config="{children: 'children', iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o',accordion: true}"
                   :checkbox-config="{labelField: 'title',checkStrictly: true}"
                   @checkbox-change="selectChangeEvent"
                   :data="table.list">
          <vxe-table-column type="checkbox" title="菜单名" tree-node></vxe-table-column>
          <vxe-table-column field="path" title="跳转路径"></vxe-table-column>
          <vxe-table-column field="level" title="菜单等级"></vxe-table-column>
          <vxe-table-column field="menuType" title="菜单类型">
            <template v-slot="{ row }">
              <el-tag v-if="row.menuType === 0">目录</el-tag>
              <el-tag v-if="row.menuType === 1" type="success">菜单</el-tag>
              <el-tag v-if="row.menuType === 2" type="warning">按钮</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="realOrder" title="菜单排序"></vxe-table-column>
          <vxe-table-column field="menuState" title="状态"></vxe-table-column>
          <vxe-table-column field="menuName" title="按钮标识"></vxe-table-column>
          <vxe-table-column title="操作" width="300">
            <template v-slot="{ row}">
              <el-button size="mini" @click="handleEdit( row)" v-if="$hasButton('edit')">编辑</el-button>
              <el-button size="mini" type="success" @click="addChileren( row)"
                         v-if="$hasButton('add') && row.menuType < 2">添加下级
              </el-button>
              <el-button size="mini" type="danger" @click="handleDelete( row)" v-if="$hasButton('remove')">删除
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
      <mform v-model="form" :type="editType" :show.sync="visible" width="35%" v-if="visible" @refresh="getTableList"></mform>
    </el-row>
  </div>
</template>

<script>
  import search from '@/components/my/TopSerach'
  import { SYSTEM } from '@/api'
  import {ss, ls} from '@/utils/storage'
  import mform from './form'

  export default {
    components: {
      search,
      mform
    },
    data() {
      return {
        ss,
        ls,
        editType: 0,
        visible: false,
        chooseList: [],
        form: {},
        table: {
          list: [
            {
              uuid: '1',
              title: '系统',
              path: '',
              level: 1,
              menuType: 0,
              menuState: 1,
              fatherId: '0',
              menuName: 'system',
              children: [
                {
                  uuid: '2',
                  fatherId: '1',
                  title: '菜单5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555',
                  path: '/system/menu',
                  level: 2,
                  menuType: 1,
                  menuState: 1,
                  menuName: 'menu',
                  children: [
                    {
                      fatherId: '2',
                      uuid: '3',
                      title: '添加',
                      menuName: 'edit',
                      level: 3,
                      menuType: 2,
                      menuState: 1
                    },
                    {
                      fatherId: '2',
                      uuid: '20',
                      title: '删除',
                      menuName: 'remove',
                      level: 3,
                      menuType: 2,
                      menuState: 1
                    }
                  ]
                },
                {
                  uuid: '21',
                  fatherId: '1',
                  title: '第二个菜单',
                  path: '/system/menu',
                  level: 2,
                  menuType: 1,
                  menuState: 1,
                  menuName: 'menu222'
                }

              ]
            }

          ]
        }
      }
    },
    computed: {},
    mounted() {
      // console.log(this.$hasButton('remove'))
      this.getTableList()
    },
    watch: {
      form(v) {
      }
    },
    methods: {
      getTableList() {
        SYSTEM.menuList().then(res => {
          if (res.code === 200) {
            this.table.list = res.data
          }
        })
      },
      handleEdit(row) {
        this.form = row
        this.visible = true
        this.editType = 1
      },
      handleview(row) {
        this.form = row
        this.visible = true
        this.editType = 2
      },
      handleDelete(row) {
        let type = ''
        switch (Number(row.menuType)) {
          case 0:
            type = '目录'
            break
          case 1:
            type = '菜单'
            break
          case 2:
            type = '按钮'
            break
        }
        this.$confirm(`确定要删除${row.title + type}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          SYSTEM.removeMenu([row.uuid]).then(res => {
            if (res.code === 200 ) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
        })
      },
      addMenu() {
        this.form = {
          fatherId: '0',
          menuType: 0,
          menuState: 1,
          level: 1
        }
        this.editType = 0
        this.visible = true
      },
      addChileren(row) {
        this.form = {
          fatherId: row.uuid,
          menuState: 1,
          level: row.level + 1
        }
        this.editType = 0
        this.visible = true
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      selectChangeEvent(val) {
        if (val.records[0] && val.records[0].children && val.records[0].children.length > 0) {
          let children = val.records[0].children
          if (!this.chooseList.includes(...children)) { //下级没有全部选中
            this.$message.warning('存在下级，不能删除')
            this.$refs.xTree.setCheckboxRow(val.records[0], false)
          }
        }
        this.chooseList = this.$refs.xTree.selection
      },
      removeList() {
      }
    }
  }
</script>
<style lang="scss" scoped>
  /*.small-card {*/
  /*  ::v-deep .el-card__body {*/
  /*    padding: 10px;*/
  /*  }*/
  /*}*/

  .el-form {
    ::v-deep .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
